import Component from '@teld/q-components/Badge';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  fixNameSpace,
  pickOwnForBasicComponent,
} from 't/common/utils';
import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.scss';
import './index.scss';

export * from '@teld/q-components/Badge';

export default defineComponent({
  name: fixNameSpace(Component.name),
  props: {
    ...commonProps,
    ...Component.props,
    demo: {
      type: String,
      default() {
        return '';
      },
    },
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const [mappingProps, mappingExpose] = useMappingProps(props);

    expose(mappingExpose);

    onMounted(() => {});

    function onClickHandler(params) {}

    return () => {
      return (
        <Component
          ref={refComponent}
          {...attrs}
          {...pickOwnForBasicComponent(mappingProps, Component.props, attrs)}
          class={['t-badge', styles.module]}
          v-show={mappingProps.visible}
          onClick={onClickHandler}
          // v-slots={{ ...slots }}
        >
          {slots}
        </Component>
      );
    };
  },
});
